import React, { Component, PropTypes } from 'react'
import { hashHistory } from 'react-router'

export default class TabBar extends Component {
  render() {
    const { activeIndex } = this.props
    return (
      <div className={`cm-footer-container`}>
        <div
          onClick = {
            () => {
              hashHistory.push('/main')
            }
          }
        >
          <span className="cm-padding-top24">
            {
              activeIndex == 1 ?
              <img src={require("../../statics/images/icon_home_active.png")}/>
              :
              <img src={require("../../statics/images/icon_home.png")}/>
            }
          </span>
          <span className={ activeIndex == 1 ? 'cm-padding-top8 -active' : 'cm-padding-top8'}>首页</span>
        </div>
        <div
          onClick={
            () => {
              hashHistory.push('/project')
            }
          }
        >
          <span className="cm-padding-top18">
            {
              activeIndex == 2 ?
              <img src={require("../../statics/images/icon_project_active.png")}/>
              :
              <img src={require("../../statics/images/icon_project.png")}/>
            }
          </span>
          <span className={ activeIndex == 2 ? 'cm-padding-top8 -active' : 'cm-padding-top8'}>项目</span>
        </div>
        <div
          onClick={
            () => {
              hashHistory.push('/account')
            }
          }
        >
          <span className="cm-padding-top18">
            {
              activeIndex == 3 ?
              <img src={require("../../statics/images/icon_user_active.png")}/>
              :
              <img src={require("../../statics/images/icon_user.png")}/>
            }
          </span>
          <span className={ activeIndex == 3 ? 'cm-padding-top8 -active' : 'cm-padding-top8'}>账号</span>
        </div>
        <div
          onClick={
            () => {
              hashHistory.push('/share')
            }
          }
        >
          <span>
            {
              activeIndex == 4 ?
              <img src={require("../../statics/images/icon_share_active.png")}/>
              :
              <img src={require("../../statics/images/icon_share.png")}/>
            }
          </span>
          <span className={ activeIndex == 4 ? 'cm-padding-top8 -active' : 'cm-padding-top8'}>分享</span>
        </div>
      </div>
      )
  }
}

TabBar.propTypes = {
  activeIndex: PropTypes.number.isRequired,
}